<!-- 基地管理 -->
<template>
  <div class="base_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <el-button type="primary" @click="addBase">新增基地</el-button>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-input v-model="name" @keyup[native].enter="searchName" @change="searchName" placeholder="基地名称" clearable
              :suffix-icon="Search" />
          </el-form-item>
        </el-form>
      </div>
      <DataCollectTable :data="data" :total="total" :config="config" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>
  </div>
</template>

<script setup>
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive } from 'vue'
import $ from "@util/base"
import { $msg, $box } from "@ui/msg";
import { Search } from '@element-plus/icons-vue'
import useRoute from "@util/router";
import api from "@api/base"

const route = useRoute()

route.watchRouter('basemanager', () => { getBaseList() })

const name = ref(route.query().name || '')

function searchName(val) {
  route.replaceQuery('name', val)
}

const data = ref([])
const total = ref(0)

function roleOperations() {
  return [OPERATIONS.check, OPERATIONS.modify, OPERATIONS.del]
}
const config = {
  showIndex: true,
  operations: {
    label: '操作',
    width: 120,
    operations: roleOperations
  },
  column: [
    {
      label: '基地名称',
      prop: 'name',
      width: 180,
    }, {
      label: '基地地址',
      prop: 'address',
    }, {
      label: '创建人',
      prop: 'creatorName',
      width: 100,
    }, {
      label: '创建时间',
      prop: 'createTime',
      width: 100,
    }
  ]
}

function addBase() {
  route.push({ name: 'basedetails', query: { type: 'add' } })
}

const opHander = operationsHander()
opHander.install(OP_KEY.check, (data) => {
  route.push({ name: 'basedetails', query: { type: 'show', code: data.id } })
})

// opHander.install(OP_KEY.baseData, (data) => {
//   route.push({ name: 'overview', query: { base: data.baseCode } })
// })

opHander.install(OP_KEY.modify, (data) => {
  route.push({ name: 'basedetails', query: { type: 'modify', code: data.id } })
})

opHander.install(OP_KEY.delete, (data) => {
  $box.open("删除确认", `是否删除${data.name}`, () => {
    api.delete(data.id, () => {
      $msg.succ("删除成功");
      getBaseList()
    })
  });
})

getBaseList()
function getBaseList() {
  let routeQuery = route.query()
  api.baseList({
    name: routeQuery.name,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {
    total.value = val.total
    data.value = val.itemList
  })
}

</script>